<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar
      title="用户登录"
      left-text="返回首页"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <!-- 登录框 -->
    <div class="viewport">
      <div id="logindiv">
        <!-- 输入账号 -->
        <p>
          <input
            type="text"
            class="input"
            id="uanme"
            placeholder="请输入手机号/邮箱/用户名/账号"
            v-model="name"
            @blur="checkName"
          />
          <!-- 验证过改变账号状态样式 -->
          <span :class="nameState">{{ nameMsg }}</span>
        </p>
        <!-- 输入密码 -->
        <p>
          <input
            type="password"
            class="input"
            id="upwd"
            placeholder="请输入登录密码"
            v-model="pwd"
            @blur="checkPwd"
          />
          <!-- 验证过改变密码状态样式 -->
          <span :class="pwdState">{{ pwdMsg }}</span>
        </p>
        <div class="auto" id="auto" @click="svalue = !svalue">
          <!-- 当点击的时候要给b添加selected类，反而selects 默认select -->
          <span :class="selectClass" style="height: 19px"></span>
          下次自动登录
        </div>
        <button @click="checkForm">登录</button>
        <div class="options">
          <!-- 跳转到注册页面 -->
          <span><router-link to="/register">免费注册</router-link></span>
        </div>
        <div class="other">
          <p><a href="javascript:;">实体店会员卡登录>></a></p>
          <p>合作网站账号登录</p>
          <ul>
            <li class="alipay">
              <a
                href="https://auth.alipay.com/login/express.htm?goto=https%3A%2F%2Fmemberexprod.alipay.com%3A443%2Fauthorize%2FuserAuthQuickLoginAction.htm%3Fe_i_i_d%3Df45fe4327dd6b831710b9971d3b63fa5"
                ><span>支付宝</span></a
              >
            </li>
            <li>
              <a
                href="login/qq/redirect.do?returnurl=http://m.hchw.net/index.htm?t=2021.10.24.10"
                ><span>QQ</span></a
              >
            </li>
            <li>
              <a
                href="login/sina/redirect.do?returnurl=http://m.hchw.net/index.htm?t=2021.10.24.10"
              ></a
              ><span>新浪微博</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  color: black;
}
body {
  background-color: #f8f8f8;
}
/* 登录框样式 */
.viewport {
  min-width: 320px;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 45px;
  -webkit-overflow-scrolling: touch;
}
#logindiv {
  width: 90%;
  height: auto;
  margin: 20px auto;
  padding-bottom: 20px;
  font-family: "\5fae\8f6f\96c5\9ed1";
}
#logindiv p {
  width: 100%;
  position: relative;
}
#logindiv .input {
  width: 92%;
  height: 40px;
  border: 1px #d7d7d7 solid;
  background: #fff;
  line-height: 40px;
  margin-bottom: 10px;
  font: inherit;
  font-size: 15px;
  padding-left: 15px;
  color: #252525;
  border-radius: 3px;
  box-sizing: border-box;
  -webkit-appearance: none;
}
/* 验证账号密码格式 */
/* 格式正确 */
.hidden1 {
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin-top: 10px;
  height: 20px;
  line-height: 20px;
  width: 20px;
  background-color: rgb(7, 209, 7);
  display: inline-block;
  border-radius: 50%;
}
/* 格式不正确 */
.hidden2 {
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin-top: 5px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  background-color: #e4393c;
  display: inline-block;
  border-radius: 50%;
}
.van-switch {
  left: 303px;
  top: -46px;
}
#logindiv .auto {
  position: relative;
  padding-left: 26px;
  height: 18px;
  line-height: 15px;
  margin-bottom: 10px;
  color: #848689;
  font: inherit;
  font-size: 13px;
}
/* 控制是否自动登录 */
.selects {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: url()
    no-repeat;
  background-size: 18px 18px;
}

.selected {
  position: absolute;
  left: 0;
  top: 0;
  height: 19px;
  width: 19px;
  background: url(../../public/gou1.png) repeat-x !important;
  background-size: 19px 19px;
}
#logindiv button {
  display: block;
  width: 100%;
  height: 40px;
  background: #f15353;
  color: #fff;
  font: inherit;
  font-size: 17px;
  line-height: 40px;
  text-align: center;
  letter-spacing: 5px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
#logindiv .options {
  width: 100%;
  padding-top: 20px;
  margin-bottom: 35px;
  font-size: 15px;
}
#logindiv .other p {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
}
#logindiv .other li {
  float: left;
  display: inline;
  margin: 5px 10px;
  margin-left: 0;
}
#logindiv .other li span {
  display: block;
  height: 24px;
  background-image: url(../../public/img/长图.gif);
  text-indent: -9999px;
}
#logindiv .other li span.alipay {
  width: 47px;
  background-position: 0 0;
}
</style>
<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  data() {
    return {
      //控制开关
      // checked:true
      name: "", //双向绑定用户名和密码
      pwd: "",
      nameMsg: "",
      pwdMsg: "",
      //绑定账号密码验证状态
      nameState: {
        hidden1: false,
        hidden2: false,
      },
      pwdState: {
        hidden1: false,
        hidden2: false,
      },
      //切换是否自动登录按钮状态,控制是否选择自动登录的一个参数
      svalue: false,
    };
  },
  methods: {
    // 头部导航栏后退跳转
    onClickLeft() {
      this.$router.push(`/`);
    },
    checkName() {
      //账号验证
      let reg = /^\w{6,15}$/;
      if (reg.test(this.name) === true) {
        this.nameState = {
          hidden1: true,
          hidden2: false,
        };
        this.nameMsg = `√`;
        return true;
      } else {
        this.nameState = {
          hidden1: false,
          hidden2: true,
        };
        this.nameMsg = "×";
        return false;
      }
    },
    checkPwd() {
      //密码验证
      let reg = /^\d{6}$/;
      if (reg.test(this.pwd) === true) {
        this.pwdState = {
          hidden1: true,
          hidden2: false,
        };
        this.pwdMsg = `√`;
        return true;
      } else {
        this.pwdState = {
          hidden1: false,
          hidden2: true,
        };
        this.pwdMsg = `×`;
        return false;
      }
    },
    //发送请求验证,点击验证表单
    checkForm(event) {
      console.log(event.target);
      if (this.checkName() && this.checkPwd()) {
        console.log("验证成功，发送请求，执行登录业务...");
        this.axios
          .post("/users/login", {
            uname: this.name,
            upwd: this.pwd,
          })
          .then((res) => {
            console.log(res.data);
            if (res.data.code == 200) {
              Toast.success("登录成功");
              //修改vuex中的登陆状态
              this.$store.commit("loginok", this.name);
              // this.loginok(`${this.name}`);
              //将islogin与username存入sessionStorage
              sessionStorage.setItem("islogin", true);
              sessionStorage.setItem("username", this.name);
              // 跳转首页
              this.$router.push("/");
            } else if (res.data.code == 201) {
              Toast.fail("登陆失败");
            }
          });
      }
    },
  },
  watch: {},
  mounted() {},
  computed: {
    //控制自动选择样式的函数
    selectClass() {
      return [this.svalue == false ? "selects" : "selected"];
    },
  },
};
</script>